<template>
  <div class="app-container">

    <h2 style="text-align: center;">添加轮播图</h2>

    <el-form>
      <el-form-item label="轮播图名称">
        <el-input v-model="banner.title" placeholder="请输入轮播图名称"/>
      </el-form-item>

    <el-form-item label="轮播图排序">
      <el-input-number v-model="banner.sort" :min="0" :max="10000" controls-position="right"/>
    </el-form-item>

      <!-- 课程封面 TODO -->
      <el-form-item label="轮播图图片">

        <el-upload
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
          :action="BASE_API+'/eduoss/fileoss'"
          class="avatar-uploader">
          <img :src="banner.imageUrl">
        </el-upload>

      </el-form-item>

      <el-form-item>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import banner from "../../../api/teacher/banner";

export default {
  data() {
    return {
      saveBtnDisabled: false,
      banner: {
        id:'',
        title: '',
        //默认
        imageUrl: 'https://guli-edu-1999.oss-cn-beijing.aliyuncs.com/2022/04/02/5094df7187f5482681b4935a52049e69109951163594594622.jpg',
        linkUrl:'',
        sort:0,
        isDeleted:0
      },
      BASE_API: process.env.BASE_API, // 接口API地址
    }
  },
  created() {
    /*if (this.$route.params && this.$route.params.id) {
      const id = this.$route.params.id//从路径获取id值
      this.getInfo(id)//调用根据id查询的方法
    }*/
    this.init()
  },
  watch: {  //监听
    $route(to, from) { //路由变化方式，路由发生变化，方法就会执行
      this.init()
    }
  },
  methods: {
    init() {
      if (this.$route.params && this.$route.params.id) {
        const id = this.$route.params.id//从路径获取id值
        this.getInfo(id)//调用根据id查询的方法
      } else {
        //清空表单
        this.banner.id = ''
        this.banner.title = ''
        this.banner.sort = ''
        this.banner.imageUrl='https://guli-edu-1999.oss-cn-beijing.aliyuncs.com/2022/04/02/5094df7187f5482681b4935a52049e69109951163594594622.jpg'
      }
    },
    //上传封面成功调用的方法
    handleAvatarSuccess(res, file) {
      this.banner.imageUrl = res.data.url
    },
    //上传之前调用的方法
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    //添加轮播图
    addBannerInfo() {
      banner.addBanner(this.banner)
        .then(response => {
          //提示
          this.$message({
            type: 'success',
            message: '添加轮播图成功!'
          });
          //回到列表页面，路由跳转
          this.$router.push({path: "/banner/list"})
        })
    },
    //根据id查询一条信息
    getInfo(id) {
      banner.editBannerById(id)
        .then(response => {
          this.banner = response.data.banner
        })
    },
    //修改轮播图信息
    updateBannerInfo(){
      banner.editBanner(this.banner)
        .then(response => {
          //提示
          this.$message({
            type: 'success',
            message: '修改轮播图成功!'
          });
          //回到列表页面，路由跳转
          this.$router.push({path: "/banner/list"})
        })
    },
    //保存或修改
    saveOrUpdate() {
      //判断是修改还是添加，如果有id是修改，没有id是添加
      if (!this.banner.id) {
        this.addBannerInfo()
      } else {
        this.updateBannerInfo()
      }
    },
  }
}
</script>

<!--<style scoped>
.tinymce-container {
  line-height: 29px;
}
</style>-->
